<template>
	<view class="list-container">
		<view v-for="(item, index) in listData" :key="index" class="list-item" @click="handleClick(item)">
			<!-- 图片部分，使用懒加载 -->
			<view class="image-container">
				<image class="item-image" :src="item.coverUrl" mode="aspectFill" lazy-load @load="handleImageLoad(index)"
					:class="{ 'image-loaded': item.isLoaded }" />
				<!-- 图片加载占位 -->
				<view v-if="!item.isLoaded" class="image-placeholder">
					<text class="loading-text">加载中...</text>
				</view>
			</view>
			<!-- 内容部分 -->
			<view class="item-content">
				<text class="item-title">{{ item.title }}</text>
				<text class="item-desc">{{ item.content }}</text>
			</view>
		</view>

		<!-- 加载更多提示 -->
		<view v-if="loading" class="loading">
			<text>加载中...</text>
		</view>

		<!-- 没有更多数据提示 -->
		<view v-if="noMore" class="no-more">
			<text>没有更多数据了</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
import { getNews } from '../../../api/sever/SeverInformation';
	// 列表数据
	const listData = ref([]);

	// 加载状态
	const loading = ref(false);
	const noMore = ref(false);
	const page = ref(1);
	const pageSize = ref(10);
 
 //向后端发送请求获取数据
 getNews().then(res => {
 	listData.value=res.data;
 	// console.log(res, '资讯推送返回的图片、标题、正文')
 }).catch(err => {
 	console.log(err, '数据获取失败')
 })

	// 处理图片加载
	const handleImageLoad = (index) => {
		console.log(`图片 ${index} 加载完成`);
		// 标记图片已加载
		listData.value[index].isLoaded = true;
		if (index === listData.value.length - 1) {
			noMore.value = true;
		}
	};

	// 处理点击事件
	const handleClick = (item) => {
		// 使用 JSON.stringify 将对象转换为字符串
		const dataStr = encodeURIComponent(JSON.stringify(item));
		uni.navigateTo({
			url: `/components/serve/Detail/Detail?data=${dataStr}`
		});
	};

	// 监听滚动事件
	const handleScroll = () => {
		const query = uni.createSelectorQuery();
		query.select('.list-container').boundingClientRect(data => {
			if (data && data.bottom <= uni.getSystemInfoSync().windowHeight + 50) {
				loadMore();
			}
		}).exec();
	};

	// 在页面中定义 onPageScroll 方法
	defineExpose({
		onPageScroll(e) {
			handleScroll();
		}
	});


	onUnmounted(() => {
		// 清理工作
		loading.value = false;
		noMore.value = false;
		page.value = 1;
	});
</script>

<style scoped>
	.list-container {
		width: 100%;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		background-color: #f8f9fa;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
		transition: transform 0.2s ease;
	}

	.list-item:active {
		transform: scale(0.98);
	}

	.image-container {
		position: relative;
		width: 100%;
		height: 400rpx;
		background-color: #f0f2f5;
		overflow: hidden;
	}

	.item-image {
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.image-loaded {
		opacity: 1;
	}

	.image-placeholder {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f0f2f5;
	}

	.loading-text {
		color: #8c8c8c;
		font-size: 28rpx;
	}

	.item-content {
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		background: linear-gradient(to bottom, #ffffff, #fafafa);
	}

	.item-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #262626;
		line-height: 1.4;
	}

	.item-desc {
		font-size: 28rpx;
		color: #595959;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.loading,
	.no-more {
		text-align: center;
		padding: 24rpx;
		color: #8c8c8c;
		font-size: 28rpx;
		border-radius: 12rpx;
		margin: 20rpx 0;
	}
</style>